import React, { useEffect, useState } from "react";
import { View, Textarea, Text } from "@tarojs/components";
import { articleType } from "@/types";
import ImgList from "@/components/imgList";
import http from "@/request";
import { ShowLoading, ShowToast } from "@/utils";

const ArticleEdit: React.FC<{
    onPreview: (art: articleType) => void,
    onSuccess: (art: articleType) => void,
    data: articleType
}> = ({ onPreview, data, onSuccess }) => {
    const [article, setArticle] = useState<articleType>({})
    const [imgList, setImgList] = useState<string[]>([])

    useEffect(() => {
        setArticle({
            ...data
        })
        setImgList(data.imgs || [])
    }, [data])

    const onInputChange = (val, key) => {
        setArticle({
            ...article,
            [key]: val
        })
    }
    const saveArticle = () => {
        ShowLoading('保存中')
        http.post('/article/addOrUpdate', {
            ...article,
            imgs: imgList.join(',')
        }).then((res) => {
            ShowToast('保存成功')
            onSuccess({
                ...res.data,
                imgs: imgList
            })
        }).catch(err => {
            ShowToast(err.msg || '保存失败')
        })
    }
    return (
        <View className="article-edit-component border-main-color flex-column flex-item">
            <View className="tip font-size24">长按图片删除</View>
            <ImgList imgList={imgList} upload maxNum={8} onChange={setImgList} preview></ImgList>
            <Textarea autoHeight
                placeholder="添加标题"
                maxlength={100}
                className="title-input article-input font-size32"
                value={article.title || ''}
                onInput={(e) => onInputChange(e.detail.value, 'title')}>
            </Textarea>
            <Textarea autoHeight
                placeholder="添加正文"
                maxlength={10000}
                className="content-input article-input font-size28"
                value={article.content || ''}
                onInput={(e) => onInputChange(e.detail.value, 'content')}>
            </Textarea>
            <View className="page-bottom flex-column flex-item card-background">
                <View className="half-line"></View>
                <View className="comment-input-container flex-row flex-item">
                    <View className="flex1"></View>
                    <View onClick={() => onPreview({
                        ...article,
                        imgs: imgList
                    })} className="btn preview-btn flex-row flex-center">
                        <Text className="data-icon font-size40 iconfont icon-yanjing"></Text>
                        <Text className="data-val font-size24">预览</Text>
                    </View>
                    <View className="flex1"></View>
                    <View onClick={saveArticle} className="btn save-btn flex-row flex-center">
                        <Text className="data-val font-size24">保存笔记</Text>
                    </View>
                    <View className="flex1"></View>
                </View>
            </View>
        </View>
    )
}

export default ArticleEdit